<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" Content="Windows-1252">
<title>border-left Attribute</title>
<style>@import url(coUA.css);</style>
</HEAD>

<BODY>
<h3><a name="cssattr_0001000301000d00"></a>border-left Attribute </h3>
<p>
{ <b>border-left:</b> &lt;<b>border-left-width&gt;</b> || &lt;<b>border-style&gt;</b> || &lt;<b>color&gt;</b>}<BR></p>
<p>
This attribute sets the left border. Supported on block and replaced elements only. </p>
<p>
This attribute is not inherited. </p>
<p>
<b>Settings</b></p>
<p>
These properties set the border of an element: the 'border' property sets the border for all four sides while the other properties only set their respective side. </p>
<p>
The border is drawn in the image pointed to by the URL. If no URL is specified, or when the image is not available, the color value is used. </p>
<p>
If an image is found through the URL, it will be used as a texture (i.e. repeated) to draw the border. The &lt;color&gt; value, if specified, is used: 
<ul>
<li>
to fill transparent regions of an image <br><br></li>
<li>
while loading the image from the URL <br><br></li>
<li>
if no URL is specified </li>
</ul>
<p>
If no &lt;color&gt; value is specified, the value of the 'color' property will take its place: </p>
<p>
P { </p>
<p>
    color: black; </p>
<p>
    background: white; </p>
<p>
    border: solid;</p>
<p>
  }</p>
<p>
In the above example, the border will be a solid black line. </p>
<p>
<b>&lt;border-width&gt;</b> <i>Value:</i> [ thin | medium | thick | &lt;length&gt; ]<BR> <i>Initial:</i> medium<BR> </p>
<p>
The keyword widths are constant throughout a document: </p>
<p>
h3 { border: solid thick red }</p>
<p>
  P  { border: solid thick blue }</p>
<p>
In the example above, 'h3' and 'P' elements will have the same border width regardless of font size. To do relative width, the 'em' unit can be used: </p>
<p>
h3 { border: solid 0.5em }</p>
<p>
<b>&lt;border-style&gt;</b> <i>Value:</i> [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]<BR> <i>Initial:</i> none<BR> </p>
<p>
The following border styles are defined: </p>
<p>
none </p>
<p>
no border is drawn (regardless of any &lt;border-width&gt;) </p>
<p>
dotted </p>
<p>
the border is a dotted line drawn on top of the background of the element </p>
<p>
dashed </p>
<p>
the border is a dashed line drawn on top of the background of the element </p>
<p>
solid </p>
<p>
the border is a solid line </p>
<p>
double </p>
<p>
the border is a double line drawn on top of the background of the element. The sum of the two single lines and the space between equals the &lt;border-width&gt; value. </p>
<p>
groove </p>
<p>
a 3D groove is drawn in colors based on the &lt;URL&gt; and/or the &lt;color&gt; value. To save colors and processing power, UAs may choose to ignore the image for this &lt;border-style&gt; </p>
<p>
ridge </p>
<p>
a 3D ridge is drawn in colors based on the &lt;URL&gt; and/or the &lt;color&gt; value. To save colors and processing power, UAs may choose to ignore the image for this &lt;border-style&gt; </p>
<p>
inset </p>
<p>
a 3D inset is drawn in colors based on the &lt;URL&gt; and/or the &lt;color&gt; value. To save colors and processing power, UAs may choose to ignore the image for this &lt;border-style&gt; </p>
<p>
outset </p>
<p>
a 3D outset is drawn in colors based on the &lt;URL&gt; and/or the &lt;color&gt; value. To save colors and processing power, UAs may choose to ignore the image for this &lt;border-style&gt; </p>
</BODY>
</HTML>
